<script setup lang="ts">
import { ref, onUpdated } from "vue";

// 定义响应式数据对象
const data = ref({
  time: 0,
  foots: 0,
  long: 0,
});

// 定义变量控制样式变化
const isUpdated = ref(false);

// onUpdated 生命周期函数，数据更新后触发
onUpdated(() => {
  isUpdated.value = true;
  // 可以在这里添加样式变化后的其他逻辑，比如一段时间后移除样式等
  setTimeout(() => {
    isUpdated.value = false;
  }, 2000);
});

// 定义更新数据的函数
const updateData = () => {
  data.value = {
    time: 68,
    foots: 11896,
    long: 7.96,
  };
};
</script>

<template>
  <div class="sport-card">
    <h3>今日运动数据</h3>
    <div class="data-item">
      <span>运动时长：</span>
      <span :class="{ updated: isUpdated }">{{ data.time }}分钟</span>
    </div>
    <div class="data-item">
      <span>行走步数：</span>
      <span :class="{ updated: isUpdated }">{{ data.foots }}步</span>
    </div>
    <div class="data-item">
      <span>运动距离：</span>
      <span :class="{ updated: isUpdated }">{{ data.long }}公里</span>
    </div>
    <button @click="updateData">更新数据</button>
  </div>
</template>

<style scoped>
.sport-card {
  width: 300px;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
}
.data-item {
  margin: 10px 0;
  text-align: left;
}
.updated {
  color: green;
  font-weight: bold;
}
button {
  margin-top: 20px;
  padding: 8px 16px;
  background-color: green;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
